<template>
	<view class="wrapper">
	  <!-- 个人资料 -->
	  <view class="profile">
		<view class="meta">
		  <view class="avatar">
			<open-data type="userAvatarUrl"></open-data>
		  </view>
		  <view class="nickname">
			<open-data type="userNickName"></open-data>
		  </view>
		  <!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png"></image> -->
		  <!-- <text class="nickname">孙悟空</text> -->
		</view>
	  </view>
	  <!-- 统计 -->
	  <view class="count">
		<view class="cell">
		  8 <text>收藏的店铺</text>
		</view>
		<view class="cell">
		  14 <text>收藏的商品</text>
		</view>
		<view class="cell">
		  18 <text>关注的商品</text>
		</view>
		<view class="cell">
		  84 <text>我的足迹</text>
		</view>
	  </view>
	  <!-- 我的订单 -->
	  <view class="orders">
		<view class="title">我的订单</view>
		<view class="sorts">
		  <text class="icon-bill">待付款</text>
		  <text class="icon-car">待收货</text>
		  <text class="icon-money">退款/退货</text>
		  <text class="icon-list">全部订单</text>
		</view>
	  </view>
	  <!-- 地址管理 -->
	  <view class="address icon-arrow">
		收货地址
	  </view>
	  <!-- 其它 -->
	  <view class="extra">
		<view class="item icon-arrow">联系客服</view>
		<button class="item icon-arrow">意见反馈</button>
	  </view>
	</view>
  </template>
  
  <script>
	export default {
	  
	}
  </script>
  
  <style scoped lang="less">
	.wrapper {
	  position: absolute;
	  top: 0;
	  bottom: 0;
  
	  width: 100%;
	  background-color: #f4f4f4;
	}
  
	.profile {
	  height: 375rpx;
	  background-color: #ea4451;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  
	  .meta {
  
		.avatar {
		  width: 140rpx;
		  height: 140rpx;
		  border-radius: 50%;
		  border: 2rpx solid #fff;
		  overflow: hidden;
		}
  
		.nickname {
		  display: block;
		  text-align: center;
		  margin-top: 20rpx;
		  font-size: 30rpx;
		  color: #fff;
		}
	  }
	}
  
	.count {
	  display: flex;
	  margin: 0 20rpx;
	  height: 100rpx;
	  text-align: center;
	  border-radius: 4rpx;
	  background-color: #fff;
  
	  position: relative;
	  top: -27rpx;
  
	  .cell {
		flex: 1;
		padding-top: 16rpx;
		font-size: 27rpx;
		color: #333;
	  }
  
	  text {
		display: block;
		font-size: 24rpx;
	  }
	}
  
	.orders {
	  margin: -17rpx 20rpx 0 20rpx;
	  padding: 20rpx 0;
	  background-color: #fff;
	  border-radius: 4rpx;
  
	  .title {
		padding-left: 20rpx;
		font-size: 30rpx;
		color: #333;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	  }
  
	  .sorts {
		padding-top: 30rpx;
		text-align: center;
		display: flex;
	  }
  
	  [class*="icon-"] {
		flex: 1;
		font-size: 24rpx;
  
		&::before {
		  display: block;
		  font-size: 48rpx;
		  margin-bottom: 8rpx;
		  color: #ea4451;
		}
	  }
	}
  
	.address {
	  line-height: 1;
	  background-color: #fff;
	  font-size: 30rpx;
	  padding: 25rpx 0 25rpx 20rpx;
	  margin: 10rpx 20rpx;
	  color: #333;
	  border-radius: 4rpx;
	}
  
	.extra {
	  margin: 0 20rpx;
	  background-color: #fff;
	  border-radius: 4rpx;
  
	  .item {
		line-height: 1;
		padding: 25rpx 0 25rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 30rpx;
		color: #333;
	  }
  
	  button {
		text-align: left;
		background-color: #fff;
  
		&::after {
		  border: none;
		  border-radius: 0;
		}
	  }
	}
  
	.icon-arrow {
	  position: relative;
  
	  &::before {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	  }
	}
  </style>
  